<template>
  <div class="w-fill h-auto bg-[#1a2c38] min-375 text-white">
    <!-- 问题 -->
    <div class="w-full p-4">
      <div class="mb-6">
        <h1 class="text-2xl font-bold">{{ $t("page.setting.set") }}</h1>
      </div>
      <div class="responsive-layout">
        <div class="sidebar font-semibold mb-6 p-1 md:mb-0 text-sm">
          <button
            v-for="(item, index) in leftItemNav"
            @click="changeNav(item)"
            :class="{
              'active-tab': item.icon === activeTab
            }"
            class="pl-[20px] btn bg-[#071824] w-full px-1 py-2 text-white"
          >
            {{ $t(item.name) }}
          </button>
        </div>

        <div class="content bg-[#0f212e] p-4 rounded-md">
          <div v-if="activeTab === 'general'">
            <div class="">
              <div
                class="bg-[#1a2c38] section mb-6 rounded"
                style="border: 1px solid #2f4553"
              >
                <h2
                  class="flex justify-between text-xl p-6 font-semibold items-center leading-5"
                >
                  <div>
                    {{ $t("page.setting.Email") }}
                    <span
                      v-if="email.length > 0"
                      class="bg-[#00e701] text-black text-xs px-2 py-1 rounded-full"
                      >{{ $t("page.setting.Verified") }}</span
                    >
                  </div>
                  <div>
                    <van-icon
                      v-if="showAlterEmail"
                      class="cursor-pointer close-icon"
                      @click="backPage"
                      name="cross"
                    />
                  </div>
                </h2>
                <div style="padding-top: 0" class="p-6" v-if="!showAlterEmail">
                  <div
                    class="mb-8"
                    style="height: 1px; background: #2f4553"
                  ></div>
                  <label class="block mb-2">
                    {{ $t("page.setting.Email") }}
                  </label>

                  <input
                    type="email"
                    v-model="email"
                    class="w-full p-2 rounded ipt-dark"
                    readonly
                  />
                </div>

                <div style="padding-top: 0" class="p-6" v-else>
                  <div
                    class="mb-8"
                    style="height: 1px; background: #2f4553"
                  ></div>
                  <label class="block mb-2">
                    {{ $t("page.setting.emailCode") }}
                    <span class="text-red-600">*</span>
                  </label>
                  <div class="relative mb-4">
                    <input
                      type=""
                      v-model="emailFrom.emailCode"
                      class="w-full p-2 rounded ipt-dark"
                    />
                    <span class="text-red-600 text-[14px]">{{
                      emailCodeMsg
                    }}</span>
                  </div>

                  <label class="block mb-2">
                    {{ $t("page.setting.newEmail") }}
                    <span class="text-red-600">*</span>
                  </label>
                  <div class="relative mb-4">
                    <input
                      type=""
                      v-model="emailFrom.emailVal"
                      @input="changeEmaiNumber"
                      class="w-full p-2 rounded ipt-dark"
                    />
                    <span class="text-red-600 text-[14px]">{{
                      emailValMsg
                    }}</span>
                  </div>
                </div>
                <div class="" style="height: 1px; background: #2f4553"></div>
                <div class="flex justify-end p-6">
                  <button
                    v-if="!showAlterEmail"
                    class="bg-[#00e701] text-black py-2 px-2 rounded"
                    @click="sedEmailMsg"
                    :disabled="emailCountdown > 0"
                  >
                    {{ emailText }}
                  </button>
                  <button
                    v-else
                    class="bg-[#00e701] text-black py-2 px-2 rounded"
                    @click="submitemail"
                  >
                    {{ $t("page.setting.Submit") }}
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div v-if="activeTab === 'safe'">
            <div class="">
              <form
                class="bg-[#1a2c38] section rounded"
                style="border: 1px solid #2f4553"
              >
                <h2 class="text-xl p-6 font-semibold items-center leading-5">
                  {{ $t("page.setting.psw") }}
                </h2>
                <div style="padding-top: 0" class="p-6">
                  <div
                    class="mb-8"
                    style="height: 1px; background: #2f4553"
                  ></div>
                  <label class="block mb-2"
                    >{{ $t("page.setting.oldpsw") }}
                    <span class="text-red-600">*</span></label
                  >
                  <div class="relative mb-4">
                    <input
                      :type="eyeChange1 ? 'text' : 'password'"
                      v-model="safeForm.oldPsw"
                      class="w-full p-2 rounded ipt-dark"
                    />
                    <i
                      @click="eyeChange1 = !eyeChange1"
                      class="absolute right-3 top-3 cursor-pointer"
                    >
                      <!-- <van-icon
                        @click="eyeChange1 = !eyeChange1"
                        :name="eyeChange1 ? 'closed-eye' : 'eye-o'"
                      /> -->
                      <svg
                        v-if="eyeChange1"
                        width="20"
                        height="20"
                        viewBox="0 0 48 48"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M24 36C35.0457 36 44 24 44 24C44 24 35.0457 12 24 12C12.9543 12 4 24 4 24C4 24 12.9543 36 24 36Z"
                          fill="none"
                          stroke="#fff"
                          stroke-width="4"
                          stroke-linejoin="round"
                        />
                        <path
                          d="M24 29C26.7614 29 29 26.7614 29 24C29 21.2386 26.7614 19 24 19C21.2386 19 19 21.2386 19 24C19 26.7614 21.2386 29 24 29Z"
                          fill="none"
                          stroke="#fff"
                          stroke-width="4"
                          stroke-linejoin="round"
                        />
                      </svg>
                      <svg
                        v-else
                        width="20"
                        height="20"
                        viewBox="0 0 48 48"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M6 16C6.63472 17.2193 7.59646 18.3504 8.82276 19.3554C12.261 22.1733 17.779 24 24 24C30.221 24 35.739 22.1733 39.1772 19.3554C40.4035 18.3504 41.3653 17.2193 42 16"
                          stroke="#fff"
                          stroke-width="4"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        />
                        <path
                          d="M28.9775 24L31.048 31.7274"
                          stroke="#fff"
                          stroke-width="4"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        />
                        <path
                          d="M37.3535 21.3536L43.0103 27.0104"
                          stroke="#fff"
                          stroke-width="4"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        />
                        <path
                          d="M5.00004 27.0103L10.6569 21.3534"
                          stroke="#fff"
                          stroke-width="4"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        />
                        <path
                          d="M16.9278 31.7276L18.9983 24.0001"
                          stroke="#fff"
                          stroke-width="4"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        />
                      </svg>
                    </i>
                    <span class="text-red-600 text-[14px]">{{ pwd_old }}</span>
                  </div>

                  <label class="block mb-2 mt-6"
                    >{{ $t("page.setting.newpsw") }}
                    <span class="text-red-600">*</span>
                  </label>
                  <div class="relative mb-4">
                    <input
                      :type="eyeChange2 ? 'text' : 'password'"
                      v-model="safeForm.newPsw1"
                      @input="inputChangePwd"
                      class="w-full p-2 rounded ipt-dark"
                    />
                    <i
                      @click="eyeChange2 = !eyeChange2"
                      class="absolute right-3 top-3 cursor-pointer"
                    >
                      <!-- <van-icon
                        @click="eyeChange2 = !eyeChange2"
                        :name="eyeChange2 ? 'closed-eye' : 'eye-o'"
                      /> -->
                      <svg
                        v-if="eyeChange2"
                        width="20"
                        height="20"
                        viewBox="0 0 48 48"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M24 36C35.0457 36 44 24 44 24C44 24 35.0457 12 24 12C12.9543 12 4 24 4 24C4 24 12.9543 36 24 36Z"
                          fill="none"
                          stroke="#fff"
                          stroke-width="4"
                          stroke-linejoin="round"
                        />
                        <path
                          d="M24 29C26.7614 29 29 26.7614 29 24C29 21.2386 26.7614 19 24 19C21.2386 19 19 21.2386 19 24C19 26.7614 21.2386 29 24 29Z"
                          fill="none"
                          stroke="#fff"
                          stroke-width="4"
                          stroke-linejoin="round"
                        />
                      </svg>
                      <svg
                        v-else
                        width="20"
                        height="20"
                        viewBox="0 0 48 48"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M6 16C6.63472 17.2193 7.59646 18.3504 8.82276 19.3554C12.261 22.1733 17.779 24 24 24C30.221 24 35.739 22.1733 39.1772 19.3554C40.4035 18.3504 41.3653 17.2193 42 16"
                          stroke="#fff"
                          stroke-width="4"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        />
                        <path
                          d="M28.9775 24L31.048 31.7274"
                          stroke="#fff"
                          stroke-width="4"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        />
                        <path
                          d="M37.3535 21.3536L43.0103 27.0104"
                          stroke="#fff"
                          stroke-width="4"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        />
                        <path
                          d="M5.00004 27.0103L10.6569 21.3534"
                          stroke="#fff"
                          stroke-width="4"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        />
                        <path
                          d="M16.9278 31.7276L18.9983 24.0001"
                          stroke="#fff"
                          stroke-width="4"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        />
                      </svg>
                    </i>
                    <span class="text-red-600 text-[14px]">{{ pwdord }}</span>
                  </div>

                  <label class="block mb-2 mt-6"
                    >{{ $t("page.setting.conformpsw") }}
                    <span class="text-red-600">*</span></label
                  >
                  <div class="relative mb-4">
                    <input
                      :type="eyeChange3 ? 'text' : 'password'"
                      v-model="safeForm.newPsw2"
                      class="w-full p-2 rounded ipt-dark"
                    />
                    <i
                      @click="eyeChange3 = !eyeChange3"
                      class="absolute right-3 top-3 cursor-pointer"
                    >
                      <!-- <van-icon
                        @click="eyeChange3 = !eyeChange3"
                        :name="eyeChange3 ? 'closed-eye' : 'eye-o'"
                      /> -->
                      <svg
                        v-if="eyeChange3"
                        width="20"
                        height="20"
                        viewBox="0 0 48 48"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M24 36C35.0457 36 44 24 44 24C44 24 35.0457 12 24 12C12.9543 12 4 24 4 24C4 24 12.9543 36 24 36Z"
                          fill="none"
                          stroke="#fff"
                          stroke-width="4"
                          stroke-linejoin="round"
                        />
                        <path
                          d="M24 29C26.7614 29 29 26.7614 29 24C29 21.2386 26.7614 19 24 19C21.2386 19 19 21.2386 19 24C19 26.7614 21.2386 29 24 29Z"
                          fill="none"
                          stroke="#fff"
                          stroke-width="4"
                          stroke-linejoin="round"
                        />
                      </svg>
                      <svg
                        v-else
                        width="20"
                        height="20"
                        viewBox="0 0 48 48"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M6 16C6.63472 17.2193 7.59646 18.3504 8.82276 19.3554C12.261 22.1733 17.779 24 24 24C30.221 24 35.739 22.1733 39.1772 19.3554C40.4035 18.3504 41.3653 17.2193 42 16"
                          stroke="#fff"
                          stroke-width="4"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        />
                        <path
                          d="M28.9775 24L31.048 31.7274"
                          stroke="#fff"
                          stroke-width="4"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        />
                        <path
                          d="M37.3535 21.3536L43.0103 27.0104"
                          stroke="#fff"
                          stroke-width="4"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        />
                        <path
                          d="M5.00004 27.0103L10.6569 21.3534"
                          stroke="#fff"
                          stroke-width="4"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        />
                        <path
                          d="M16.9278 31.7276L18.9983 24.0001"
                          stroke="#fff"
                          stroke-width="4"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        />
                      </svg>
                    </i>
                    <span class="text-red-600 text-[14px]">{{ pwd_new }}</span>
                  </div>
                </div>
                <div class="" style="height: 1px; background: #2f4553"></div>
                <div class="flex justify-end p-6">
                  <div
                    @click="submitFrom"
                    class="bg-[#00e701] text-black py-2 px-2 rounded cursor-pointer"
                  >
                    {{ $t("page.setting.Submit") }}
                  </div>
                </div>
              </form>
            </div>
          </div>
          <div v-if="activeTab === 'phone'">
            <div class="">
              <div
                class="bg-[#1a2c38] section mb-6 rounded"
                style="border: 1px solid #2f4553"
              >
                <h2
                  class="flex justify-between text-xl p-6 font-semibold items-center leading-5"
                >
                  <div>
                    {{ $t("layer.login.PhoneNumber") }}
                    <span
                      v-if="!addPhone"
                      class="bg-[#00e701] text-black text-xs px-2 py-1 rounded-full"
                    >
                      {{ $t("page.setting.Verified") }}
                    </span>
                  </div>
                  <div>
                    <van-icon
                      v-if="showAlterPhone"
                      class="cursor-pointer close-icon"
                      @click="backPage"
                      name="cross"
                    />
                  </div>
                </h2>

                <div>
                  <div v-if="addPhone" class="p-6 pt-0">
                    <div
                      class="mb-8"
                      style="height: 1px; background: #2f4553"
                    ></div>

                    <label class="block mb-2">
                      {{ $t("page.setting.PleaseEnterPhone") }}
                      <span class="text-red-600">*</span>
                    </label>

                    <div class="relative flex">
                      <input
                        v-model="phone"
                        type="number"
                        @input="changeCellPhoneNumber(phone)"
                        @keydown="handleKeydown"
                        class="w-full p-2 rounded ipt-dark"
                      />
                    </div>
                    <span
                      class="text-red-600 text-[14px]"
                      v-if="cellPhoneNumberMSg"
                    >
                      {{ $t("page.setting.CorrectPhoneNumber") }}
                    </span>

                    <label class="block mb-2 mt-2">
                      {{ $t("page.setting.inputPhoneNumber") }}
                      <span class="text-red-600">*</span>
                    </label>

                    <div class="relative flex">
                      <input
                        v-model="phoneFrom.addCode"
                        type="number"
                        @keydown="handleKeydown"
                        class="w-full p-2 rounded ipt-dark"
                      />
                      <div
                        class="absolute right-2 top-[50%] transform -translate-y-[50%] text-[#818da3]"
                        v-if="countdown > 0"
                        @click.stop
                      >
                        {{ countdown }}
                        {{ $t("page.setting.SendAgainSeconds") }}
                      </div>
                      <div
                        v-else
                        @click.stop="sedPhoneMsg"
                        class="absolute top-[50%] transform -translate-y-[50%] text-[#16c60c] right-2"
                      >
                        {{ $t("page.setting.SendVerificationCode") }}
                      </div>
                    </div>
                  </div>

                  <div v-else>
                    <div class="p-6 pt-0" v-if="!showAlterPhone">
                      <div
                        class="mb-8"
                        style="height: 1px; background: #2f4553"
                      ></div>

                      <label class="block mb-2">
                        {{ $t("page.setting.Enter") }} {{ phoneStr }}
                        {{ $t("page.setting.VerificationCode") }}
                        <span class="text-red-600">*</span>
                      </label>

                      <div class="relative flex">
                        <input
                          v-model="phoneFrom.oldPhone"
                          type="number"
                          @keydown="handleKeydown"
                          class="w-full p-2 rounded ipt-dark"
                        />
                        <div
                          class="absolute right-2 top-[50%] transform -translate-y-[50%] text-[#818da3]"
                          v-if="countdown > 0"
                        >
                          {{ countdown }}
                          {{ $t("page.setting.SendAgainSeconds") }}
                        </div>
                        <div
                          v-else
                          @click="sedPhoneMsg"
                          class="absolute top-[50%] transform -translate-y-[50%] text-[#16c60c] right-2"
                        >
                          {{ $t("page.setting.SendVerificationCode") }}
                        </div>
                      </div>
                    </div>

                    <div style="padding-top: 0" class="p-6" v-else>
                      <div
                        class="mb-8"
                        style="height: 1px; background: #2f4553"
                      ></div>
                      <label class="block mb-2">
                        {{ $t("page.setting.inputNewPhoneNumber") }}
                        <span class="text-red-600">*</span>
                      </label>
                      <div class="relative mb-4">
                        <input
                          type=""
                          v-model="phoneFrom.phoneVal"
                          @input="changeCellPhoneNumber(phoneFrom.phoneVal)"
                          @keydown="handleKeydown"
                          class="w-full p-2 rounded ipt-dark"
                        />
                        <span
                          class="text-red-600 text-[14px]"
                          v-if="cellPhoneNumberMSg"
                        >
                          {{ $t("page.setting.CorrectPhoneNumber") }}
                        </span>
                      </div>

                      <label class="block mb-2">
                        {{ $t("page.setting.inputPhoneNumber") }}
                        <span class="text-red-600">*</span>
                      </label>
                      <div class="relative mb-4">
                        <input
                          type="number"
                          v-model="phoneFrom.phoneCode"
                          @keydown="handleKeydown"
                          class="w-full p-2 rounded ipt-dark"
                        />

                        <div
                          class="absolute right-2 top-[50%] transform -translate-y-[50%] text-[#818da3]"
                          v-if="countdown > 0"
                        >
                          {{ countdown }}
                          {{ $t("page.setting.SendAgainSeconds") }}
                        </div>
                        <div
                          v-else
                          @click="sedNewPhone"
                          class="absolute top-[50%] transform -translate-y-[50%] text-[#16c60c] right-2"
                        >
                          {{ $t("page.setting.SendVerificationCode") }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="" style="height: 1px; background: #2f4553"></div>
                <div class="flex justify-end p-6">
                  <button
                    v-if="addPhone"
                    class="bg-[#00e701] text-black py-2 px-2 rounded"
                    @click="addPhoneFrom"
                  >
                    {{ $t("page.setting.Submit") }}
                  </button>

                  <div v-else>
                    <button
                      v-if="!showAlterPhone"
                      class="bg-[#00e701] text-black py-2 px-2 rounded"
                      @click="sedPhoneNext"
                    >
                      {{ $t("layer.wallet.nextstep") }}
                    </button>
                    <button
                      v-else
                      class="bg-[#00e701] text-black py-2 px-2 rounded"
                      @click="submPhoneFrom"
                    >
                      {{ $t("page.setting.Submit") }}
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, getCurrentInstance, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  userEditPsw,
  postUserEmailModify,
  getUserEmailCode,
  postUserPhoneSend,
  postUserPhoneModify,
  postUserSmsCodeCheck,
  postAddUserPhone
} from "../../api/user.js";
import { mainAct } from "../../store/activeda";
import { computed } from "vue";
const {
  appContext: {
    config: { globalProperties }
  }
} = getCurrentInstance();
const main = mainAct();
const router = useRouter();
const email = ref("");
const phone = ref("");
const phoneStr = ref("");
const addPhone = ref(false);

const leftItemNav = [
  {
    name: "page.setting.general",
    icon: "general"
  },
  {
    name: "page.setting.security",
    icon: "safe"
  },
  {
    name: "layer.login.PhoneNumber",
    icon: "phone"
  }
];

const changeNav = item => {
  activeTab.value = item.icon;
  clearInterval(intervalId.value);
  countdown.value = 0;
  intervalId.value = null;
  main.getUSerDetil();
  getShowAddPhone();
};

const getShowAddPhone = () => {
  if (main.user_detail) {
    email.value = main.user_detail.email;
  }

  if (main.user_detail?.phone) {
    addPhone.value = false;
    phoneStr.value = main.user_detail.phone;
    phone.value = main.user_detail.phone;
  } else {
    addPhone.value = true;
    phoneStr.value = "";
  }
};

onMounted(async () => {
  if (main.isLogin) {
    await main.getUSerDetil();
    getShowAddPhone();
  }
});

const activeTab = ref("general");
const safeForm = ref({
  oldPsw: "",
  newPsw1: "",
  newPsw2: ""
});
const eyeChange1 = ref(true);
const eyeChange2 = ref(false);
const eyeChange3 = ref(false);
const toggleFaq = (index, tab) => {
  if (tab === "general") {
    generalFaqs.value[index].open = !generalFaqs.value[index].open;
  } else if (tab === "safe") {
    safeFaqs.value[index].open = !safeFaqs.value[index].open;
  }
};

const inputChangePwd = () => {
  var regex = /^.{6,}$/;
  if (regex.test(safeForm.value.newPsw1)) {
    pwdord.value = "";
  } else {
    pwdord.value = globalProperties.$t("page.setting.pwdordVal");
  }
};

let pwd_old = ref("");
let pwdord = ref("");
let pwd_new = ref("");
const submitFrom = async () => {
  pwd_old.value = "";
  pwdord.value = "";
  pwd_new.value = "";

  console.log(
    "!safeForm.value.oldPsw.length//*",
    !safeForm.value.oldPsw.length
  );
  if (!safeForm.value.oldPsw.length) {
    // debugger;
    pwd_old.value = globalProperties.$t("page.setting.pwold");
    ElNotification({
      position: "top-left",
      zIndex: 1004,
      message: globalProperties.$t("page.setting.inputFont"),
      type: "error"
    });

    return;
  }

  if (safeForm.value.newPsw1.length == 0) {
    ElNotification({
      position: "top-left",
      zIndex: 1004,
      message: globalProperties.$t("page.setting.inputFont"),
      type: "error"
    });
    pwdord.value = globalProperties.$t("page.setting.pwdord");
    return;
  }

  if (safeForm.value.newPsw2.length == 0) {
    ElNotification({
      position: "top-left",
      zIndex: 1004,
      message: globalProperties.$t("page.setting.inputFont"),
      type: "error"
    });
    pwd_new.value = globalProperties.$t("page.setting.pwdNew");
    return;
  }

  if (safeForm.value.newPsw2 != safeForm.value.newPsw1) {
    pwd_new.value = globalProperties.$t("page.setting.pwroldNew");
    pwdord.value = globalProperties.$t("page.setting.pwroldNew");
  }
  let res = await userEditPsw({
    password_old: safeForm.value.oldPsw,
    password: safeForm.value.newPsw1,
    password_confirm: safeForm.value.newPsw2
  });

  if (res.errno == 0) {
    safeForm.value.oldPsw = "";
    safeForm.value.newPsw1 = "";
    safeForm.value.newPsw2 = "";
    let msg = globalProperties.$t("page.setting.alterPwd");
    ElNotification({
      position: "top-left",
      zIndex: 1004,
      title: "Success",
      message: msg,
      type: "success"
    });

    router.push("/casino");
    main.isLogin = false;
    sessionStorage.removeItem("user");

    let lang = localStorage.getItem("lang");
    localStorage.clear();
    localStorage.setItem("lang", lang);
  }
};

const emailCodeMsg = ref("");
const emailValMsg = ref(globalProperties.$t("page.setting.generalAddre"));
const emailFrom = reactive({
  emailCode: "",
  emailVal: ""
});
const showAlterEmail = ref(false);
const submitemail = () => {
  // showAlterEmail.value = true;
  if (!emailFrom.emailCode.length)
    return ElNotification({
      position: "top-left",
      zIndex: 1004,
      title: "error",
      message: globalProperties.$t("page.setting.emilCodeMsg"),
      type: "error"
    });
  if (emailValMsg.value.length)
    return ElNotification({
      position: "top-left",
      zIndex: 1004,
      title: "error",
      message: emailValMsg.value,
      type: "error"
    });
  postUserEmailModify({
    code: emailFrom.emailCode,
    email: emailFrom.emailVal
  }).then(res => {
    if (res.errno == 0) {
      main.user_detail.email = emailFrom.emailVal;
      email.value = emailFrom.emailVal;
      emailFrom.emailCode = "";
      emailFrom.emailVal = "";
      showAlterEmail.value = false;
      let msg = globalProperties.$t("page.setting.alterPwd");
      ElNotification({
        position: "top-left",
        zIndex: 1004,
        title: "Success",
        message: msg,
        type: "success"
      });
    }
  });
};

const emailIntervalId = ref(null);
const emailCountdown = ref(0);
const startEmailCountdown = () => {
  if (emailIntervalId.value) {
    clearInterval(emailIntervalId.value); // 如果已经有一个定时器在运行，先清除它
  }
  emailCountdown.value = 60;
  emailIntervalId.value = setInterval(() => {
    // 存储新的定时器 ID
    if (emailCountdown.value > 0) {
      emailCountdown.value--;
    } else {
      clearInterval(emailIntervalId.value); // 清除定时器
      emailIntervalId.value = null; // 将定时器 ID 重置为 null
    }
  }, 1000);
};
const emailText = computed(() => {
  return emailCountdown.value > 0
    ? `${emailCountdown.value} ${globalProperties.$t(
        "page.setting.SendAgainSeconds"
      )}`
    : globalProperties.$t("page.setting.alterEmil");
});
const hasTriggered = ref(false);

const sedEmailMsg = () => {
  if (hasTriggered.value) return; // 如果已经触发过，直接返回

  if (email.value.length == 0)
    return ElNotification({
      position: "top-left",
      zIndex: 1004,
      message: globalProperties.$t("page.setting.setEmit"),
      type: "error"
    });

  hasTriggered.value = true; // 标记为已触发

  getUserEmailCode()
    .then(res => {
      if (res.errno == 0) {
        startEmailCountdown();
        showAlterEmail.value = true;
      }
      hasTriggered.value = false; // 接口返回后清空状态
    })
    .catch(() => {
      hasTriggered.value = false; // 出现错误时也清空状态
    });
};

// 手机号修改
const showAlterPhone = ref(false);

const phoneFrom = reactive({
  phoneCode: "",
  phoneVal: "",
  oldPhone: "",
  addCode: ""
});

const cellPhoneNumberMSg = ref(true);
// 验证手机号
const changeCellPhoneNumber = val => {
  let reg = /[789]{1}\d{9}$/;
  if (reg.test(val)) {
    cellPhoneNumberMSg.value = false;
  } else {
    cellPhoneNumberMSg.value = true;
  }
};

const changeEmaiNumber = () => {
  const regex = /^[a-zA-Z0-9_.%+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
  if (regex.test(emailFrom.emailVal)) {
    emailValMsg.value = "";
  } else {
    emailValMsg.value = globalProperties.$t("page.setting.generalAddre");
  }
};

const backPage = () => {
  Object.assign(emailFrom, {
    emailCode: "",
    emailVal: ""
  });
  showAlterEmail.value = false;
  showAlterPhone.value = false;
};

// 修改手机号
const submPhoneFrom = () => {
  if (!phoneFrom.phoneVal.length)
    return ElNotification({
      position: "top-left",
      zIndex: 1004,
      message: globalProperties.$t("page.setting.CorrectPhoneNumber"),
      type: "error"
    });
  if (!phoneFrom.phoneCode.length)
    return ElNotification({
      position: "top-left",
      zIndex: 1004,
      message: globalProperties.$t("page.setting.inputPhoneNumber"),
      type: "error"
    });
  postUserPhoneModify({
    code: phoneFrom.oldPhone,
    phone: phoneFrom.phoneVal,
    new_code: phoneFrom.phoneCode
  }).then(res => {
    if (res.errno == 0) {
      phoneFrom.oldPhone = "";
      phoneStr.value = phoneFrom.phoneVal;
      phoneFrom.phoneVal = "";
      phoneFrom.phoneCode = "";
      clearInterval(intervalId.value);
      countdown.value = 0;
      intervalId.value = null;
      showAlterPhone.value = false;
      ElNotification({
        position: "top-left",
        zIndex: 1004,
        title: "Success",
        message: globalProperties.$t("page.setting.alterPwd"),
        type: "success"
      });
    }
  });
};

const countdown = ref(0);
const intervalId = ref(null); // 使用 null 初始值，因为 setInterval 返回的是一个数字

const addPhoneFrom = () => {
  if (cellPhoneNumberMSg.value)
    return ElNotification({
      position: "top-left",
      zIndex: 1004,
      message: globalProperties.$t("page.setting.inputFont"),
      type: "error"
    });
  // 转字符串
  console.log("phoneFrom.addCode", phoneFrom.addCode.toString());
  if (!phoneFrom.addCode.toString().length)
    return ElNotification({
      position: "top-left",
      zIndex: 1004,
      message: globalProperties.$t("page.setting.inputPhoneNumber"),
      type: "error"
    });

  postAddUserPhone({
    code: phoneFrom.addCode,
    phone: phone.value
  }).then(res => {
    if (res.errno == 0) {
      phoneStr.value = phone.value;
      main.getUSerDetil();
      addPhone.value = false;
      phoneFrom.addCode = "";
      // phone.value = "";
      clearInterval(intervalId.value);
      countdown.value = 0;
      intervalId.value = null;
      // getShowAddPhone();
    }
  });
};

const handleKeydown = event => {
  // 允许退格键、方向键等特殊键
  if (
    [8, 9, 13, 37, 39, 46].includes(event.which) ||
    (event.which >= 48 && event.which <= 57) ||
    (event.which >= 96 && event.which <= 105)
  ) {
    return;
  }
  event.preventDefault();
};

// 下一步验证手机验证码
const sedPhoneNext = () => {
  console.log("phoneFrom.oldPhone", phoneFrom.oldPhone);
  postUserSmsCodeCheck({
    phone: phone.value,
    code: phoneFrom.oldPhone
  }).then(res => {
    if (res.errno == 0) {
      showAlterPhone.value = true;
      clearInterval(intervalId.value);
      countdown.value = 0;
      intervalId.value = null;
    }
  });
};

const sedNewPhone = () => {
  postUserPhoneSend({
    phone: phoneFrom.phoneVal
  }).then(res => {
    if (res.errno == 0) {
      startCountdown();
    }
  });
};

const sedPhoneMsg = () => {
  if (!phone.value.length && cellPhoneNumberMSg.value) return;
  postUserPhoneSend({
    phone: phone.value
  }).then(res => {
    if (res.errno == 0) {
      startCountdown();
    }
  });
};

const startCountdown = () => {
  if (intervalId.value) {
    clearInterval(intervalId.value); // 如果已经有一个定时器在运行，先清除它
  }
  countdown.value = 60;
  intervalId.value = setInterval(() => {
    // 存储新的定时器 ID
    if (countdown.value > 0) {
      countdown.value--;
    } else {
      clearInterval(intervalId.value); // 清除定时器
      intervalId.value = null; // 将定时器 ID 重置为 null
    }
  }, 1000);
};
</script>

<style scoped lang="less">
@media (min-width: 600px) {
  .responsive-layout {
    display: flex;
    position: relative;
  }
  .responsive-layout .sidebar {
    position: sticky;
    top: 2rem;
    width: 220px;
    height: 300px;

    display: block;
    margin-right: 20px;
    background-color: unset;
    border-radius: 0;
    padding: 0;
    .btn {
      width: 220px;
      background-color: #0f212e;
      border-radius: 0;
      text-align: left;
    }
  }
  .responsive-layout .content {
    flex-grow: 1;
  }
  .active-tab {
    background-color: #071824 !important;
    border-left: 3px solid #1475e1 !important;
  }
}
.content {
  overflow: auto;
  user-select: none;
  table {
    min-width: 900px;
  }
}
.sidebar {
  background-color: #071824;
  display: flex;
  border-radius: 40px;
  .btn {
    height: 40px;
    border-radius: 40px;
    text-align: center;
    border-left: 3px solid #071824;
  }
}
.active-tab {
  background-color: #2f4553;
}
.ipt-dark {
  background-color: #0f212e;
  border: 2px solid #2f4553;
}
.ipt-dark:hover {
  border-color: #557086;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</style>
